<template>
	<view class="container">
		<view class="banner">
			<view class="index-banner">
				<swiper @change='changeCurrent' :indicator-dots="false" circular='true' :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item>
						<image src="https://imgs.ynz666.com/2024/06/04/ODUwZjBkZGJjYzg1Y2IzMGI4MWRiYTM0NjBiOTRjYjQ=.jpeg" mode="aspectFill" class="slide-image"></image>
					</swiper-item>
					
				</swiper>
			</view>
		</view>
		
		<view class="fun1">
			<view class="box">
				<image src="https://imgs.ynz666.com/test/2025/03/10/Y2ZiMzJhN2QwMDFkYTk4ODhlM2U5N2FkNDlmMDI3ZDE=.png" mode="aspectFill" class="img"></image>
			</view>
		</view>
		
		<view class="fun2">
			<view class="title">
				免单体验都有什么（不包含全部）～
			</view>
			<view class="content">
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/YzlkODIyNDI4MzJjM2VhY2Y4MDFkZDVjNDAzYjRhNWI=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						美食餐饮
					</view>
					<view class="bot">
						烧烤/饮料/海鲜
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/ZjY2MTdiMTgxNTkwYjMzMWU4NmFmYmZkZDY3OThkNDU=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						影院娱乐
					</view>
					<view class="bot">
						电影院/高尔夫
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/ZWUwNGNkYjFjNTJiYTU4YzUwNDZmNDFjYWQ2N2Q3YTM=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						休闲玩乐
					</view>
					<view class="bot">
						美容护肤/养颜
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/Y2UyMzg3NzMyYzg1YjBlYTA3NzYxN2EzY2I1MmM2MzU=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						按摩足疗
					</view>
					<view class="bot">
						中医理疗/排毒
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/MzM4NzllZmNlZTM3MTJlNTliYTg3NTJkNGU2YzkyZGI=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						美容养颜
					</view>
					<view class="bot">
						美甲美发/修眉
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZmQ4NTgyOGNjNWQ2ZmY3YjEyODE1MDQ2ZjJjOTMyZjU=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						生活服务
					</view>
					<view class="bot">
						瑜伽/养生采耳
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/NGU2MGU1MzdjMmUwNDM0MGY1NzIzOTk3OTllYmVlMDA=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						个人护理
					</view>
					<view class="bot">
						毛孔/口腔清洁
					</view>
				</view>
				<view class="item">
					<image src="https://imgs.ynz666.com/test/2024/08/02/YzMyNDgzYjFkMjM0MWZkNWZkODQ5NWRkNjkwODM5MDI=.png" mode="aspectFill" class="img"></image>
					<view class="top">
						运动健身
					</view>
					<view class="bot">
						台球桌球/棋牌
					</view>
				</view>
			</view>
			
			<view class="foot">
				<view class="btnAll">
					<view class="btn1" @click="activeteFun1()">
						立即扫码激活
					</view>
					<view class="btn2" @click="activeteFun2()">
						账号密码激活
					</view>
					
					<!-- <button v-if="!mineInfo.phone && mineInfo.phone.length!==11" open-type="getPhoneNumber"
						class="btn_pho" @getphonenumber.stop="onGetPhoneNumber"></button> -->
				</view>
				
			</view>
		</view>
		
		<view class="mask" v-if="friendModal">
			<view class="friendModal_box">
				<view class="title">
					<image class="img"
						src="https://imgs.ynz666.com/test/2024/08/02/OWE4ZDM1NzM0YThlYjkzNTNlOTRmMDRiYTEzNDEzNTc=.png">
					</image>
					
					<!-- type 1扫码 2账户密码 -->
					<!-- status true 激活 false 未激活 isActivate-->
					<!-- paid true 付费 false 免费 -->
					<!-- enable true 启用 false 禁用 -->
					
					<view class="text" v-if="type==1&&!information.isActivate">
						确认信息激活
					</view>
					
					<view class="text" v-if="type==1&&information.isActivate">
						卡已被激活
					</view>
				
					
					<view class="text" v-if="type==2">
						{{typeTwoText}}
					</view>
				</view>
				
				<view class="con1" v-if="type==2">
					<view class="item">
						<view class="left">
							账号：
						</view>
						<view class="right">
							<input class="inputClass" type="text" v-model="par.accessKey" placeholder="请输入账号">
						</view>
					</view>
					<view class="item">
						<view class="left">
							密码：
						</view>
						<view class="right">
							<input class="inputClass" type="text" v-model="par.secretKey" placeholder="请输入密码">
						</view>
					</view>
				</view>
				
				<view class="btn1" v-if="type==2" @click="verifyAccount()">
					点击确认账号密码
				</view>
				
				<view class="con2">
					
					<!-- enable true 启用 false 禁用 -->
					<!-- expired true 过期  false 未过期 -->
					<view class="item">
						激活码状态：
						<!-- <view v-if="information.expireTime">
							{{information.enable?'是':'否'}}
						</view> -->
						<view v-if="information.expireTime">
							
							<view v-if="information.available">
								有效
							</view>
							
							<view v-if="!information.enable">
								冻结
							</view>
							
							<view v-if="information.expired">
								已过期
							</view>
							
							<view v-if="!information.available&&information.isActivate">
								已激活
							</view>
							
						</view>
						
					</view>
					<view class="item">
						激活码有效期至：{{information.expireTime?information.expireTime:''}}
					</view>
					<!-- <view class="item">
						激活会员卡种类：
						<view v-if="information.expireTime">
							{{information.paid?'至尊':'普通'}}
						</view>
						
					</view> -->
					<!-- <view class="item">
						激活获得免单体验次数：{{information.usageCount>=0?information.usageCount+information.spcialUsageCount:''}}
					</view> -->
				</view>
				
				<view v-if="information.cardCode">
					
					<view class="btn2" @click="cardVerifyFun" v-if="!information.isActivate&&information.available">
						确认激活
					</view>
					<!-- 不可使用 当禁用 和 过期时候显示  available true 有效-->
					<view class="btn3" v-if="!information.isActivate&&!information.available">
						不可使用
					</view>
				</view>
				
				<view class="btn2" @click="employ" v-if="information.isActivate">
					立即去使用
				</view>
				
				<view class="fot">
					<view class="btn1" @click="cancelModal">
						<image class="img"
							src="https://imgs.ynz666.com/test/storeInfo/YTQxNTg0NDkyYzE2ODMyZDQyZTM5MDk2N2IzYjI0NWU=.png">
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var app = getApp();
	import {
		CardCodeDetail,cardPassCheck,cardVerify
	} from '../../apis/my.js';
	export default {
		data() {
			return {
				friendModal: false,
				type:2,
				btntype:1,//激活按钮状态
				par:{
					secretKey:'',//密码
					accessKey:'',//账号
				},
				information:{
					
				},//激活信息
				typeOneText:'确认信息激活',
				typeTwoText:'请输入账号密码确认卡信息后激活',
				
				mineInfo:{},
			}
		},
		onLoad(options) {
			this.LoginInvite();
		},
		methods: {
			LoginInvite(login) {
				let that = this;
				let inviteId = null;
				app.isLogin({
				}, function(res) {
					that.mineInfo = res;
					// that.mineInfo.phone=''
					// console.log(that.mineInfo, "that.mineInfo")
				});
			},
			// 手机号授权
			onGetPhoneNumber(e) {
				let that = this;
				app.GetMobile(e, function(e) {
					app.getUserInfo(function(lRes) {
						that.mineInfo = lRes;
						uni.showToast({
							title: '绑定成功',
							icon: "none",
							duration:3000
						})
						// that.drawDown();
					})
				});
			},
			activeteFun1(){
				
				let that = this;
				that.type=1
				that.clearCon();
				uni.scanCode({
					scanType: ['qrCode'],
					success(code) {
						console.log(code, "code")
						if (code.result) {
							console.log(code.result, "code.result")
							let Code = code.result;
							CardCodeDetail({
								cardCode: Code
							}).then(result => {
								switch (result.code) {
									case 0:
									  that.information=result.data
										
										that.friendModal=true
										console.log(result,"resultresultresult")
										break;
									default:
										 uni.showToast({
											title: result.message,
											icon: "none"
										 })
										break
								}
							})
						}
					}
				})
			},	
			clearCon(){
				this.information={}
			},
			activeteFun2(){
				this.friendModal = true
				this.type=2
				this.clearCon();
			},
			// 确认账户密码
			verifyAccount(){
				CardCodeDetail(this.par).then(res=>{	
					console.log(res,"res")
					if(res.code==0){
						this.information=res.data
					}else{
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// 确认激活
			cardVerifyFun(){
				cardVerify({cardCode:this.information.cardCode}).then(res=>{
					console.log(res,"res")
					if(res.code==0){
						this.typeTwoText='激活成功'
						this.information.isActivate=true
						// this.btntype=2
					}else{
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// 去使用
			employ(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 取消弹框
			cancelModal() {
				this.friendModal = false
				this.clearCon();
			},
		}
	}
</script>

<style lang="scss">
// banner广告
	.index-banner {
		width: 100%;
		height: 350rpx;
		margin: 0 auto;
		border-radius: 24rpx;
		position: relative;
		swiper {
			height: 320rpx;
			width: 100%;
			margin-top: 40rpx;
		}
		swiper-item {
			width: 100%;
			height: 320rpx;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
	    overflow: unset;
			.swiper-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				overflow: unset;
			}
	
			.slide-image {
				height: 320rpx;
				width: 710rpx;
				z-index: 1;
				transition: all 0.2s ease-in 0s;
				border-radius: 24rpx;
				margin: auto;
			}
	
			.active {
				transform: scale(1.14);
				z-index: 20;
				// margin: 0rpx 20rpx;
			}
		}
	
		.dots-box {
			width: 100%;
			align-items: center;
			justify-content: center;
			display: flex;
			position: absolute;
			bottom: 0;
			z-index: 1;
	
			.dots {
				width: 40rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #d8d8d8;
				margin: 0 4rpx;
			}
	
			.dots-active {
				background: #F43B00;
				width: 40rpx;
				height: 6rpx;
				border-radius: 20rpx;
			}
		}
		
		.dots-box {
			width: 100%;
			align-items: center;
			justify-content: center;
			display: flex;
			position: absolute;
			bottom: 0;
			z-index: 1;
		
			.dots {
				width: 40rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #d8d8d8;
				margin: 0 4rpx;
			}
		
			.dots-active {
				background: #F43B00;
				width: 40rpx;
				height: 6rpx;
				border-radius: 20rpx;
			}
		}
	}
	
	.fun1{
		width: 100%;
		background: #FFF5F0;
		height: 178rpx;
		.box{
			margin: 0 22rpx;
		}
		.img{
			width: 100%;
			height: 77rpx;
			margin: 24rpx 0;
		}
	}
	.fun2{
		padding-bottom: 100rpx;
		width: 100%;
		min-height: 500rpx;
		background: #fff;
		border-radius: 38rpx 38rpx 0 0;
		margin-top: -38rpx;
		.title{
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;
			padding: 40rpx 0 0;
			text-align: center;
		}
		.content{
			margin: 80rpx 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item{
				width: 165rpx;
				height: 133rpx;
				background: linear-gradient( 180deg, #FFF0F7 0%, #FEE3EE 100%);
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				margin-bottom: 80rpx;
				.img{
					width: 82rpx;
					height: 82rpx;
					position: absolute;
					top: -41rpx;
				}
				.top{
					font-weight: 500;
					font-size: 24rpx;
					color: #2A232B;
					margin-top: 8rpx;
				}
				.bot{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #86707E;
					margin-top: 5rpx;
				}
			}
			.item:nth-child(2),.item:nth-child(5){
				background: linear-gradient( 180deg, #EAFFFE 0%, #DCFFFB 100%);
			}
			.item:nth-child(3),.item:nth-child(8){
				background: linear-gradient( 180deg, #FDEEFF 0%, #F7D9FF 100%);
			}
			.item:nth-child(4),.item:nth-child(7){
				background: linear-gradient( 180deg, #EEFFEE 0%, #D8FFD4 100%);
			}
		}
		.foot{
			margin: 0 20rpx;
			.btnAll{
				width: 100%;
				height: 224rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #F43B00;
				position: relative;
			}
			.btn1{
				width: 100%;
				height: 94rpx;
				background: linear-gradient( 90deg, #FB6E00 0%, #F64100 100%);
				border: 1rpx solid #FB6E00;
				box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(128,39,2,0.23);
				border-radius: 47rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn2{
				margin-top: 30rpx;
				width: 100%;
				height: 94rpx;
				background: #FFFFFF;
				border-radius: 47rpx;
				border: 1rpx solid #B1B1B1;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn_pho {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}

.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;

		background-color: rgba(0, 0, 0, 0.65);

		.friendModal_box {
			width: 624rpx;
			// height: 588rpx;
			padding-bottom: 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -312rpx;

			.title {
				margin: 0 30rpx;
				padding-top: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.img {
					width: 26rpx;
					height: 26rpx;
				}
				.text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #F74C00;
					padding-left: 9rpx;
				}
			}
			
			.con1{
				margin: 36rpx 24rpx 0;
				background: #F6F6F6;
				border-radius: 24rpx;
				padding: 26rpx 0 11rpx;
				.item{
					margin: 0 32rpx;
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					.left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #101010;
					}
					.right{
						flex: 1;
						.inputClass{
							font-size: 26rpx;
						}
					}
				}
			}
			
			.btn1{
				margin: 38rpx 0 0;
				width: 100%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FF5E0C;
				text-decoration-line: underline;
				text-align: center;
			}
			
			.con2{
				margin: 36rpx 24rpx 0;
				background: #F6F6F6;
				border-radius: 24rpx;
				padding: 33rpx 0 6rpx;
				.item{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #101010;
					margin: 0 30rpx 27rpx;
					display: flex;
					align-items: center;
				}
			}
			
			.btn2{
				margin: 22rpx 29rpx 0;
				width: 570rpx;
				height: 94rpx;
				background: linear-gradient( 90deg, #FB6E00 0%, #F64100 100%);
				box-shadow: 0rpx 0rpx 17rpx 0rpx rgba(128,39,2,0.23);
				border-radius: 47rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.btn3{
				margin: 22rpx 29rpx 0;
				width: 570rpx;
				height: 94rpx;
				background: #ededed;
				border-radius: 47rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			

			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.btn1 {
					.img{
						width: 69rpx;
						height: 69rpx;
					}
				}

			}
		}

	}
</style>
